<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选按钮案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 整个表设置 */
        table {
            border-collapse: collapse; /* 合并相邻边框线 */
            border-spacing: 0; /* 表格的边框线 间距 */
            border: 1px solid #c0c0c0; /* 边框线 */

            width: 500px; /* 宽度 */
            margin: 100px auto; /* 版心居中 */
            text-align: center; /* 文本对齐: 水平居中 */
        }

        /* 表头 设置 */
        th {
            background-color: #09c; /* 背景色 */
            font: bold 16px "微软雅黑"; /* 字体 */
            color: #fff; /* 文字颜色 */
            height: 24px; /* 表格高度, 宽 因为是表格会随内容撑开 */
        }

        /* 表格 设置 */
        td {
            border: 1px solid #d0d0d0; /* 边框线 */
            color: #404060; /* 文字颜色 */
            padding: 10px; /* 内边距 */
        }

        .表头 {
            width: 80px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th class="表头">
            <input type="checkbox" name="" id="全部选择"> <span class="全选">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" class="选框">
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" class="选框">
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" class="选框">
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
    </tr>
</table>

<script>
    // 获取DOM元素
    const 表头复选框 = document.querySelector('#全部选择') // # 是id选择器
    const 表格其他复选框 = document.querySelectorAll('table td input')

    //注册监控事件  鼠标点击事件
    表头复选框.addEventListener('click', function () {
        console.log(表头复选框.checked) // checked 属性, 是选择复选框. 这里检查输出的是 布尔值

        // 检查 复选框是否勾选 true是勾选
        if (表头复选框.checked === true) {
            for (let i = 0; i < 表格其他复选框.length; i++) {
                // 其他全部复选框 勾选
                表格其他复选框[i].checked = 'checked' // 把其他标签复选框,修改成默认勾选
            }
        }

        // 检查 复选框是否勾选 false是没有勾选
        if (表头复选框.checked === false) {
            for (let i = 0; i < 表格其他复选框.length; i++) {
                // 其他全部复选框 取消勾选
                表格其他复选框[i].checked = '' // checked属性设置是 空,是不勾选复选框. 注意 '' 里不要有空格
            }
        }
    })
</script>

</body>
</html>